<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.1.0.min.js"></script>
    <style type="text/css">
        ul,li{
            list-style: none;
        }
        ul{
            padding:0;
            margin: 0;
        }
        .main{
            background-image: url(图片1.png);
            background-repeat: repeat-x;
            width: 100px;
        }
        li{
            background-color: lemonchiffon;
        }
        a{
            text-decoration: none;
            padding-left: 20px;
            width: 80px;
            display: block;
            padding-top: 3px;
            padding-bottom: 3px;
        }
        .main a{
            color: white;
        }
        .main li a{
            color: black;
            background-position: none;
        }
        .main ul{
            display: none;  /*隐藏子菜单*/
        }
        .main{
            float: left;
            margin-right: 1px;
        }
    </style>
</head>
<body>
<ul>
    <li class="main">
        <a href="#">菜单1</a>
        <ul>
            <li><a href="#">子菜单1</a></li>
            <li><a href="#">子菜单2</a></li>
        </ul>

    </li>
    <li class="main">
        <a href="#">菜单2</a>
        <ul>
            <li><a href="#">子菜单1</a></li>
            <li><a href="#">子菜单2</a></li>
        </ul>
    </li>
    <li class="main">
        <a href="#">菜单3</a>
        <ul>
            <li><a href="#">子菜单1</a></li>
            <li><a href="#">子菜单2</a></li>
        </ul>
    </li>
</ul>


<script>
    $(document).ready(function(){
        $(".main").hover(function(){
            $(this).children("ul").slideDown();
        },function(){
            $(this).children("ul").slideUp();
        })
    })
</script>
</body>
</html>